<template>
  <div class="bloglist-container">
    <div class="blogitem-box" ref="blogItemBoxRef">
      <BlogItem v-for="item in blogObj.rows" :key="item.id" :blogItem="item" />
    </div>
    <Empty v-if="blogObj.total == 0 && !loading" />
    <div class="pager-box" v-if="blogObj.total">
      <Pager
        :total="blogObj.total"
        :current="routerInfo.page"
        :limit="routerInfo.limit"
        @pageChange="handlerPageChange"
      />
    </div>
  </div>
</template>

<script>
import Pager from "@/components/Pager";
import BlogItem from "@/components/BlogItem";
import Empty from "@/components/Empty";
export default {
  name: "BlogList",
  components: {
    BlogItem,
    Pager,
    Empty,
  },
  props: {
    routerInfo: {
      type: Object,
      default: () => {},
    },
    blogObj: {
      type: Object,
      default: () => {},
    },
    loading: {
      type: Boolean,
      default: false,
    },
  },
  watch: {
    $route(newRoute, oldRoute) {
      this.$refs.blogItemBoxRef.scrollTop = 0;
    },
  },
  mounted() {
    this.$refs.blogItemBoxRef.addEventListener(
      "scroll",
      this.handlerBlogListScroll
    );
  },
  beforeDestroy() {
    this.$refs?.blogItemBoxRef.removeEventListener(
      "scroll",
      this.handlerBlogListScroll
    );
  },

  methods: {
    handlerBlogListScroll() {
      this.$eventBus.$emit("blogListScroll", this.$refs.blogItemBoxRef);
    },
    handlerPageChange(page) {
      if (this.routerInfo.categoryId == -1) {
        //判断没有分类
        this.$router.push({
          name: "Blog",
          query: { page, limit: this.routerInfo.limit },
        });
      } else {
        //判断有分类
        this.$router.push({
          name: "CategoryBlog",
          params: { categoryId: this.routerInfo.categoryId },
          query: { page, limit: this.routerInfo.limit },
        });
      }
    },
  },
};
</script>

<style scoped lang="less">
.bloglist-container {
  width: 100%;
  height: 100%;
  display: flex;
  overflow: hidden;
  flex-direction: column;

  .blogitem-box {
    flex: 1;
    overflow-y: auto;
    scroll-behavior: smooth;
  }
  .pager-box {
    padding: 5px 0;
    height: 30px;
  }
}
</style>
